<script lang="ts" setup>
  import { computed } from 'vue';
  import { HoleScore } from '@/types/game-score';
  import { CourseHole } from '@/types/course';
  import { kickOffTypeNames, kickOffDirectionNames } from '@/config/game';

  const props = defineProps<{
    mode: string;
    hole: CourseHole;
    holeScoreList: HoleScore[];
  }>();

  const emit = defineEmits(['click']);

  const holeScore = computed(() => {
    return props.holeScoreList.find((item) => item.holeId === props.hole.id);
  });

  const cls = computed(() => {
    if (holeScore.value) {
      const value = holeScore.value.parCount;
      const holePar = props.hole.par;
      if (value - holePar >= 2) {
        return 'blue-bg';
      }
      if (value === holePar + 1) {
        return 'blue-txt';
      }
      if (value < holePar) {
        return 'red-txt';
      }

      return '';
    }

    return '';
  });
</script>

<template>
  <td
    class="hole-score has-right-border"
    style="padding: 0"
    @click="emit('click', holeScore)"
  >
    <template v-if="holeScore">
      <div v-if="mode === 'par'" :class="cls">{{ holeScore.parCount }}</div>
      <div v-else-if="mode === 'put'" class="corner">
        {{ holeScore.putCount }}
        <span>推</span>
      </div>
      <div v-else-if="mode === 'penalty'" class="corner">
        {{ holeScore.penaltyCount }}
        <span>罚</span>
      </div>
      <div v-else-if="mode === 'kickOffType'" class="kick-off">
        {{ kickOffTypeNames[holeScore.kickOffType] }}
      </div>
      <div v-else-if="mode === 'kickOffDirection'" class="kick-off">
        {{ kickOffDirectionNames[holeScore.kickOffDirection] }}
      </div>
    </template>
  </td>
</template>

<style lang="less" scoped>
  .hole-score {
    cursor: pointer;
    line-height: 32px;
  }
  .red-txt {
    color: red;
  }

  .blue-txt {
    color: blue;
  }

  .blue-bg {
    color: blue;
  }

  .corner {
    position: relative;
    span {
      font-size: 8px;
      position: absolute;
      right: 0;
      top: 0;
      line-height: 10px;
      color: var(--color-text-2);
    }
  }

  .kick-off {
    font-size: 10px;
    color: var(--color-text-2);
  }
</style>
